<!DOCTYPE html>
<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" %>
<%@include file="../../../common/include/inc_ace.jsp" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>接口调用结果</title>
    <style type="text/css">
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
            width: 100%;
            height: 100%;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
    <script language="javascript">
        $(document).ready(function () {
            $('#sqlsubmit').click(function () {
                var sqlstr = $('#sqlstr').val();
                if (!sqlstr) {
                    $.alertMessage('请输入要执行的sql语句！！！ ', $('body'));
                } else {
                    $.ajax({
                        url: ctx + '/historyDataColl/querySqlResultBySql?number=' + Math.random(),
                        async: true,
                        type: 'post',
                        dataType: 'json',
                        data: {
                            sqlstr: sqlstr
                        },
                        success: function (req) {
                            if (req.success) {
                                var resultTable = '<table class="gridtable">';
                                var sqlResult = req.result;
                                $.each(sqlResult, function (index, result) {
                                    if(index == 0) {
                                        var tableHeader = '';
                                        for (var key in result) {
                                            tableHeader += '<th>' + key + '</th>';
                                        }
                                        resultTable += '<tr>';
                                        resultTable += tableHeader;
                                        resultTable += '</tr>';
                                    } else {
                                        var tableBody = '';
                                        for (var key in result) {
                                            tableBody += '<td>' + result[key] + '</td>';
                                        }
                                        resultTable += '<tr>';
                                        resultTable += tableBody;
                                        resultTable += '</tr>';
                                    }
                                });
                                resultTable += '</table>';
                                $('#sqlresult').html(resultTable);
                            }
                        }
                    });
                }
            });
        });
    </script>
</head>
<body style="background-color: #ffffff;width: 98%;">
<div class="row">
    <div class="col-xs-12 center h2">
        ${msg}
    </div>
</div>
<div class="row">
    <div class="form-horizontal">
        <div class="form-group">
            <div class="rowGroup">
                <label class="col-xs-1 control-label"> SQL </label>
                <div class="col-xs-10">
                    <textarea id="sqlstr" name="sqlstr" class="autosize-transition form-control"
                              style="overflow: hidden; word-wrap: break-word; height: 200px;"></textarea>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="rowGroup">
                <div class="col-xs-11">
                    <div class="pull-right">
                        <button id="sqlsubmit" type="button" class="btn btn-primary">
                            <i class="ace-icon fa fa-save align-left bigger-110"></i>
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10 h4">
        SQL执行结果
    </div>
    <div class="col-xs-1"></div>
</div>
<div class="row">
    <div class="col-xs-1"></div>
    <div id="sqlresult" class="col-xs-10">

    </div>
    <div class="col-xs-1"></div>
</div>
</body>
</html>